<template>
	<div>
		<p>el-tab组件会一次性将所有pane中的数据获取完。使用v-if来按需加载对应的pane,使用keep-alive做缓存。</p>
		<el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
			<el-tab-pane v-for="tab in tabOptions" :key="tab.name" :label="tab.label" :name="tab.name">
				<keep-alive>
					<tab-pane v-if="activeName === tab.name" :tab-name="tab.name"></tab-pane>
				</keep-alive>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
import TabPane from './components/TabPane'

export default {
	name: 'Tab',
	components: {
		TabPane,
	},
	data() {
		return {
			activeName: 'first',
			tabOptions: [
				{
					label: '标签页一',
					name: 'first',
				},
				{
					label: '标签页二',
					name: 'second',
				},
				{
					label: '标签页三',
					name: 'third',
				},
				{
					label: '标签页四',
					name: 'fourth',
				},
			],
		}
	},
	methods: {
		handleClick(tab, event) {
			console.log(tab, event)
		},
	},
}
</script>
